<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>填写核对订单信息</title>
	<link rel="stylesheet" href="style/base.css" type="text/css">
	<link rel="stylesheet" href="style/global.css" type="text/css">
	<link rel="stylesheet" href="style/header.css" type="text/css">
	<link rel="stylesheet" href="style/fillin.css" type="text/css">
	<link rel="stylesheet" href="style/footer.css" type="text/css">

	<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
	<script type="text/javascript" src="js/cart2.js"></script>

</head>
<body>
<div id="app">
	<!-- 顶部导航 start -->
	<topnav></topnav>
	<!-- 顶部导航 end -->
	
	<div style="clear:both;"></div>
	
	<!-- 页面头部 start -->
	<div class="header w990 bc mt15">
		<div class="logo w990">
			<h2 class="fl"><a href="index.html"><img src="images/logo.png" alt="商城商城"></a></h2>
			<div class="flow fr flow2">
				<ul>
					<li>1.我的购物车</li>
					<li class="cur">2.填写核对订单信息</li>
					<li>3.成功提交订单</li>
				</ul>
			</div>
		</div>
	</div>
	<!-- 页面头部 end -->
	
	<div style="clear:both;"></div>

	<!-- 主体部分 start -->
	<div class="fillin w990 bc mt15">
		<div class="fillin_hd">
			<h2>填写并核对订单信息</h2>
		</div>

		<div class="fillin_bd">
			<!-- 收货人信息  start-->
			<div class="address">
				<h3>收货人信息 </h3>
				

				<div class="address_select">
					<ul>
						<li class="cur" v-for="v in address">
							<input type="radio" name="address" v-model="ischeckedAddress" :value="v.id"/>
							{{v.shr_name}} {{v.shr_province}} {{v.shr_city}} {{v.shr_county}}  {{v.shr_mobile}}
							<a href="">设为默认地址</a>
							<a href="">编辑</a>
							<a href="">删除</a>
						</li>
						<li><input type="radio" name="address" class="new_address" @click.prevent="ischeckedAddress=''" v-model="ischeckedAddress" value="" />使用新地址</li>
					</ul>	
					<form name="address_form"  v-if="ischeckedAddress==''">
						<ul>
							<li>
								<label for=""><span>*</span>收 货 人：</label>
								<input type="text" name="" class="txt" v-model="newAddress.shr_name"/>
							</li>
							<li>
								<label for=""><span>*</span>所在地区：</label>
								<select name="" id="" v-model="newAddress.shr_province">
									<option value="">请选择</option>
									<option value="北京">北京</option>
									<option value="上海">上海</option>
									<option value="天津">天津</option>
									<option value="重庆">重庆</option>
									<option value="武汉">武汉</option>
								</select>

								<select name="" id="" v-model="newAddress.shr_city">
									<option value="">请选择</option>
									<option value="朝阳区">朝阳区</option>
									<option value="东城区">东城区</option>
									<option value="西城区">西城区</option>
									<option value="海淀区">海淀区</option>
									<option value="昌平区">昌平区</option>
								</select>

								<select name="" id="" v-model="newAddress.shr_county">
									<option value="">请选择</option>
									<option value="西二旗">西二旗</option>
									<option value="西三旗">西三旗</option>
									<option value="三环以内">三环以内</option>
								</select>
							</li>
							<li>
								<label for=""><span>*</span>详细地址：</label>
								<input type="text" name="" class="txt address" v-model="newAddress.shr_address" />
							</li>
							<li>
								<label for=""><span>*</span>手机号码：</label>
								<input type="text" name="" class="txt" v-model="newAddress.shr_mobile" />
							</li>
						</ul>
					</form>
					<a href="" class="confirm_btn" @click.prevent="submitAddress"><span>保存收货人信息</span></a>
				</div>
			</div>
			<!-- 收货人信息  end-->

			<!-- 配送方式 start -->
			<div class="delivery">
				<h3>送货方式 <a href="javascript:;" id="delivery_modify">[修改]</a></h3>
				<div class="delivery_info">
					<p>普通快递送货上门</p>
					<p>送货时间不限</p>
				</div>

				<div class="delivery_select none">
					<table>
						<thead>
							<tr>
								<th class="col1">送货方式</th>
								<th class="col2">运费</th>
								<th class="col3">运费标准</th>
							</tr>
						</thead>
						<tbody>
							<tr class="cur">	
								<td>
									<input type="radio" name="delivery" checked="checked" />普通快递送货上门
									<select name="" id="">
										<option value="">时间不限</option>
										<option value="">工作日，周一到周五</option>
										<option value="">周六日及公众假期</option>
									</select>
								</td>
								<td>￥10.00</td>
								<td>每张订单不满499.00元,运费15.00元, 订单4...</td>
							</tr>
							<tr>
								
								<td><input type="radio" name="delivery" />特快专递</td>
								<td>￥40.00</td>
								<td>每张订单不满499.00元,运费40.00元, 订单4...</td>
							</tr>
							<tr>
								
								<td><input type="radio" name="delivery" />加急快递送货上门</td>
								<td>￥40.00</td>
								<td>每张订单不满499.00元,运费40.00元, 订单4...</td>
							</tr>
							<tr>

								<td><input type="radio" name="delivery" />平邮</td>
								<td>￥10.00</td>
								<td>每张订单不满499.00元,运费15.00元, 订单4...</td>
							</tr>
						</tbody>
					</table>
					<a href="" class="confirm_btn"><span>确认送货方式</span></a>
				</div>
			</div> 
			<!-- 配送方式 end --> 

			<!-- 支付方式  start-->
			<div class="pay">
				<h3>支付方式 <a href="javascript:;" id="pay_modify">[修改]</a></h3>
				<div class="pay_info">
					<p>货到付款</p>
				</div>

				<div class="pay_select none">
					<table> 
						<tr class="cur">
							<td class="col1"><input type="radio" name="pay" />货到付款</td>
							<td class="col2">送货上门后再收款，支持现金、POS机刷卡、支票支付</td>
						</tr>
						<tr>
							<td class="col1"><input type="radio" name="pay" />在线支付</td>
							<td class="col2">即时到帐，支持绝大数银行借记卡及部分银行信用卡</td>
						</tr>
						<tr>
							<td class="col1"><input type="radio" name="pay" />上门自提</td>
							<td class="col2">自提时付款，支持现金、POS刷卡、支票支付</td>
						</tr>
						<tr>
							<td class="col1"><input type="radio" name="pay" />邮局汇款</td>
							<td class="col2">通过快钱平台收款 汇款后1-3个工作日到账</td>
						</tr>
					</table>
					<a href="" class="confirm_btn"><span>确认支付方式</span></a>
				</div>
			</div>
			<!-- 支付方式  end-->

			<!-- 发票信息 start-->
			<div class="receipt">
				<h3>发票信息 <a href="javascript:;" id="receipt_modify">[修改]</a></h3>
				<div class="receipt_info">
					<p>个人发票</p>
					<p>内容：明细</p>
				</div>

				<div class="receipt_select none">
					<form action="">
						<ul>
							<li>
								<label for="">发票抬头：</label>
								<input type="radio" name="type" checked="checked" class="personal" />个人
								<input type="radio" name="type" class="company"/>单位
								<input type="text" class="txt company_input" disabled="disabled" />
							</li>
							<li>
								<label for="">发票内容：</label>
								<input type="radio" name="content" checked="checked" />明细
								<input type="radio" name="content" />办公用品
								<input type="radio" name="content" />体育休闲
								<input type="radio" name="content" />耗材
							</li>
						</ul>						
					</form>
					<a href="" class="confirm_btn"><span>确认发票信息</span></a>
				</div>
			</div>
			<!-- 发票信息 end-->

			<!-- 商品清单 start -->
			<div class="goods">
				<h3>商品清单</h3>
				<table>
					<thead>
						<tr>
							<th class="col1">商品</th>
							<th class="col2">规格</th>
							<th class="col3">价格</th>
							<th class="col4">数量</th>
							<th class="col5">小计</th>
						</tr>	
					</thead>
					<tbody>
						<tr v-for="(v,k) in carts">
							<td class="col1"><a href=""><img :src="v.midlogo" alt="" /></a> 
								 <strong><a href="">{{v.goods_name}}</a></strong>
							</td>
							<td class="col2"> <p>{{v.spec_info}}</p> </td>
							<td class="col3">￥{{v.price}}</td>
							<td class="col4"> {{v.count}}</td>
							<td class="col5"><span>￥{{v.count*v.price.toFixed(2) }}</span></td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td colspan="5">
								<!-- <ul>
									<li>
										<span>4 件商品，总商品金额：</span>
										<em>￥5316.00</em>
									</li>
									<li>
										<span>返现：</span>
										<em>-￥240.00</em>
									</li>
									<li>
										<span>运费：</span>
										<em>￥10.00</em>
									</li>
									<li>
										<span>应付总额：</span>
										<em>￥5076.00</em>
									</li>
								</ul> -->
							</td>
						</tr>
					</tfoot>
				</table>
			</div>
			<!-- 商品清单 end -->
		
		</div>

		<div class="fillin_ft">
			<a href="" @click.prevent="submitOrder"><span>提交订单</span></a>
			<p>应付总额：<strong>￥{{totalPrice}}元</strong></p>
			
		</div>
	</div>
	<!-- 主体部分 end -->

	<div style="clear:both;"></div>
	<!-- 底部版权 start -->
	<div class="footer w1210 bc mt15">
		<p class="links">
			<a href="">关于我们</a> |
			<a href="">联系我们</a> |
			<a href="">人才招聘</a> |
			<a href="">商家入驻</a> |
			<a href="">千寻网</a> |
			<a href="">奢侈品网</a> |
			<a href="">广告服务</a> |
			<a href="">移动终端</a> |
			<a href="">友情链接</a> |
			<a href="">销售联盟</a> |
			<a href="">商城论坛</a>
		</p>
		<p class="copyright">
			 © 2005-2013 京东网上商城 版权所有，并保留所有权利。  ICP备案证书号:京ICP证070359号 
		</p>
		<p class="auth">
			<a href=""><img src="images/xin.png" alt="" /></a>
			<a href=""><img src="images/kexin.jpg" alt="" /></a>
			<a href=""><img src="images/police.jpg" alt="" /></a>
			<a href=""><img src="images/beian.gif" alt="" /></a>
		</p>
	</div>
	<!-- 底部版权 end -->
</div>
	<!--vue-----------------------------------------------------------------statrt-->
	<script src="js/vue-2.5.17.js"></script>	<!--vue-->
	<script src="js/axios-0.18.0.js"></script>	<!--axios-->
	<script src="http://mockjs.com/dist/mock.js"></script><!--mock官方-->
	<script src="js/mock.js"></script><!--mock数据-->
	<script src="js/api.js"></script><!--api自定义-->
	<script src="components/TopNav.js"></script><!--组件-->
	<script>
		var vm = new Vue({
			el:"#app",
			data:{
				address:[],				//所有地址
				ischeckedAddress:'',	//是否选中地址
				newAddress:{			//新增收货人地址
					shr_city:'',
					shr_county:'',
					shr_province:''
				},		
				carts:[]	//定义变量接收购物车数据	
			},
			created(){
				this.findAllAddress()  
				//显示购物车数据
				getCartsArr().then(res=>{
					this.carts=res.data.data.filter((c)=>{
						return c.checked==true
					})
				})
			},
			methods:{
				//所有地址
				findAllAddress(){
					getAddress().then((res)=>{
						this.address=res.data.data
						//设置默认地址选中
						for(let i=0;i<this.address.length;i++){
							if(this.address[i].shr_default==1){
								this.ischeckedAddress=this.address[i].id
								break
							}
						}
					})
				},
				//提交信息--收货人地址
				submitAddress(){
					//1.保存到数据库
					addNewAddress(this.newAddress).then((res)=>{
						if(res.data.errno==0){
							// if(this.newAddress!=null&&this.newAddress!=''){	
							// }
							//2将地址显示在页面上
							this.newAddress.id = res.data.id
							this.address.push(this.newAddress)
							this.ischeckedAddress=res.data.id
							console.log(this.newAddress)
							this.newAddress=[]
						}
					})
				},
				//提交订单
				submitOrder(){	//选中地址
					addOrder({address_id:this.ischeckedAddress}).then(res=>{
						//如果成功
						if(res.data.errno==0){
							sessionStorage.setItem('sn',res.data.sn)
							location.href="flow3.html"
						}
					})
				}
			},
			//计算属性
			computed:{
				totalPrice(){
					let sum =0
					for(let i =0;i<this.carts.length;i++){
						sum+=this.carts[i].price*this.carts[i].count
					}
					return sum.toFixed(2)
				}
			}
		})
	</script>
</body>
</html>
